<template>
  <div  class="slider">
    <swiper v-if='item && item.wap_index_01 && item.wap_index_01.data && item.wap_index_01.data.content'  :options="swiperOption" ref="mySwiper">
        <swiper-slide  v-for='items in item.wap_index_01.data.content'>
          <div class="slideShow" style="text-indent:none;">
              <img v-bind:src='items.ad_content_url' alt="">
          </div>
        </swiper-slide>
        <!-- 这是轮播的小圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!--<img src="http://m1.banggo.com/sources/cms/20160914-wx/oql.jpg" alt="">-->
  </div>
</template>   
<style>
    /*轮播图小圆点样式*/
    .swiper-pagination-bullet-active{
        background-color: #0c0c0c!important;
    }
    .swiper-pagination-bullet{
        width: 0.25rem;
        height: 0.25rem;
        display: inline-block;
        border-radius: 100%;
        background: #979797;
        opacity: 1;
    }
        img {
        width: 100%;
        height: auto;
    }
        
    .swiper-pagination {
        bottom: 60px;
    }
    @import '../../../../node_modules/swiper/dist/css/swiper.css';
</style>
<script>
 import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    export default {
        name: 'indexswiper',
        components: {
            swiper,
            swiperSlide,
        },
        data() {
            return {
                msg: 'Hello World!',
                item: null,
                pannel: null,
                selected: true,
                show: false,
                // showsearch: false,
                // searchBoxs: '',
                info: "",
                data: [],
                secondData: [],
                swiperOption: {
                    //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  
                    notNextTick: true,
                    pagination: '.swiper-pagination',
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    paginationClickable: true,
                    // autoplay自动轮播属性
                    autoplay: 3000,
                    // 是否循环播放
                    loop : true,
                    // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰，拖动，点击pagination等。
                    autoplayDisableOnInteraction : false,
                    onSlideChangeEnd: swiper => {
                        //这个位置放swiper的回调方法  
                        this.page = swiper.realIndex + 1;
                        this.index = swiper.realIndex;
                    }
                }
            }
        },
        methods: {
        },
        mounted: function() {
            this.$http.get("index.php/dvert/getDvertInfo?siteMark=wap_index&ts=1500380387").then(function(data) {
                var items = Function(data.body + ";return adList;")();
                // debugger;
                this.item = items;
                console.log(this.item);
                // 第二种方法
                // this.$http.get('index.php/dvert/getDvertInfo?siteMark=wap_index&ts=1500380387').then((response) => {       
                //  var data = response.data;  
                //     this.data =JSON.parse(data.substr(13));   
                //      }, (response) => {
                //       console.log('error');
            });
        }
  }
</script>